<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100px;
        height: 200px;
        background-color: aquamarine;
      }
    </style>
  </head>

  <body>
    <div id="app">

      <!-- 按住的系统按键中有一个是 ctrl 就行 -->
      <button @click.ctrl="handleLogin">按住 ctrl + click 做登录</button>

      <!-- 按住的系统按键有且仅能有一个 ctrl 才行 -->
      <button @click.ctrl.exact="handleLogin">按住 ctrl + click 做登录</button>


      <!-- 自定义右键菜单 -->
      <div class="out" style="width: 100px; height: 100px; background-color: green;" @click.right.prevent="handleRight"></div>

      <div class="menu" :style="menuStyle" v-show="showMenu"></div>
      <hr />

      <div>
        <label>用户名：</label>
        <input type="text" placeholder="请输入用户名" />
      </div>

      <div>
        <label>密码：</label>
        <!-- <input type="text" placeholder="请输入密码" @keyup="handlePasswordKeyup"/> -->

        <!-- 
          keyup.13    在 Vue2 时可用，Vue3 时移除了，只能使用按键别名
         -->
        <input type="text" placeholder="请输入密码" @keyup.enter="handleLogin"/>
      </div>

      <div>
        <button @click="handleLogin">登录</button>
      </div>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            clientX: 0,
            clientY: 0,
            showMenu: false
          }
        },
        computed: {
          menuStyle() {
            return {
              top: this.clientY + 'px',
              left: this.clientX + 'px'
            }
          }
        },
        methods: {
          handleLogin() {
            alert('处理登录')
          },

          handlePasswordKeyup(event) {
            console.log('event', event)
            if (event.keyCode === 13) {
              this.handleLogin()
            }
          },

          handleRight(event) {
            // event.preventDefault()
            console.log('handleRight', event.screenX, event.screenY)
            this.clientX = event.clientX
            this.clientY = event.clientY
            this.showMenu = true
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
